<template>
  <div class="hot">
    <ul>
      <li v-for="item in list" :key="item._id">
        <router-link
          :to="{
            name: 'Detail',
            query: {
              id: item._id,
            },
          }"
        >
          <van-card
            :price="item.price"
            :title="item.name"
            :thumb="item.coverImg"
          >
            <template #footer>
              <van-button size="mini">-</van-button>
              <van-button size="mini">+</van-button>
            </template>
          </van-card>
        </router-link>
      </li>
    </ul>
    <button @click="more">更多</button>
  </div>
</template>

<script>
import { get } from "../utils/request";
export default {
  name: "Hot",
  data() {
    return {
      page: 1,
      list: [],
    };
  },
  async created() {
    const res = await get("/api/v1/products", {
      page: this.page,
      product_category: this.$route.query.id,
    });
    console.log(res);
    this.list = res.products;
  },
  methods: {
    async more() {
      this.page++;
      const res = await get("/api/v1/products", {
        page: this.page,
        product_category: this.$route.query.id,
      });
      this.list = [...this.list, ...res.products];
    },
  },
};
</script>

<style>
img {
  width: 30%;
}
</style>
